<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>组件嵌套</p>
    <h1>我是父组件</h1>
    <son1></son1>
    <son2></son2>
    <son3></son3>
  </div>
  <!-- template要放在app的外面 -->
  <!-- template默认不会在页面中展示，只有调用组件时才显示 -->
  <template id="son3">
    <div>
      <p>{{msg3}}</p>
      <ul>
        <li>早饭吃什么</li>
        <li>午饭吃什么</li>
        <li>晚饭吃什么</li>
      </ul>
    </div>
  </template>
  <script src="../vue.js"></script>
  <script>
    // 全局注册，放在实例的外面、放在实例的前面
    Vue.component('son1', {
      template: `<p>{{msg1}}我是子组件1</p>`,
      data() {
        return {
          msg1: 'hello'
        }
      },
    })
    let vm = new Vue({
      el: '#app',
      data() {
        return {

        }
      },
      components: {
        'son2': {
          template: `<p>{{msg2}}我是子组件2</p>`,
          data() {
            return {
              msg2: 'hello'
            }
          }
        },
        'son3': {
          template: '#son3',
          data() {
            return {
              msg3: 'hi~'
            }
          },
        }
      }
    })
  </script>
</body>

</html>